<template>
  <div class="center">
    <div class="head">
      <div
        style="display: flex; justify-content: space-around"
        v-for="(item, index) in list"

      >
        <div class="yuan">
          <img :src="item.img" class="one"></img>
        </div>

        <div class="text">
          <div>{{ item.name }}</div>
          <div style="font-size: 28px; color: #00fffa">
            <count-to :start-val="0" :end-val="item.num" ref="countTo"></count-to
            >
          </div>
        </div>
      </div>
    </div>
 <itemCenterB1></itemCenterB1>
 <div class="_box">
  <subTit title="本年装备采购项目情况"></subTit>
  <div class="list" style="padding: 10px 16px;">
    <table-scroll-pro
        :data="tableData"
        :columns="columns"
        :config= "config"
        :class-option="classOption">
        <template slot="eDate" slot-scope="{scope, row, data}">
          <span>{{data ? data : '未完工'}}</span>
        </template>
      </table-scroll-pro>
  </div>
 </div>
 <div class="_box">
  <subTit title="本年基建项目情况"></subTit>
  <div class="list" style="padding: 10px 16px;">
    <table-scroll-pro
        :data="tableData2"
        :columns="columns2"
        :config= "config"
        :class-option="classOption">
        <template slot="eDate" slot-scope="{scope, row, data}">
          <span style="color: red;">{{data ? data : '未完工'}}</span>
        </template>
      </table-scroll-pro>
  </div>
 </div>
  </div>
</template>
<script>
import drawMixin from "@/utils/drawMixin";
let mixin = new drawMixin();
import chart from "@/components/eChart";
import scroll from "@/views/food/components/tableScroll/index.vue";
import subTit from "../../components/subTit";
import countTo from "vue-count-to";
import itemCenterB1 from "./itemCenterB1.vue";
export default {
  name: "index",
  components: { chart, scroll, subTit, countTo,itemCenterB1 },
  mixins: [mixin],
  data() {
    return {
      interval: null,
      list: [
        {
          img: require('@/assets/food/5.svg'),
          name: "学校数(所)",
          num: 342,
          unit: "所",
        },
        {
          img:require('@/assets/food/1.png'),
          name: "学生数(人)",
          num: 131065,
          unit: "人",
        },
        {
          img: require('@/assets/food/7.png'),
          name: "班级数(个)",
          num: 3103,
          unit: "个",
        },
        {
          img:require('@/assets/food/8.png'),
          name: "教师数(人)",
          num: 14098,
          unit: "人",
        },
      ],
      topList: [
        {
          name: '装备采购项目数',
          value: 342,
          unit:'个'
        },
        {
          name: '基建项目数',
          value: 342,
          unit:'个'
        },
        {
          name: '招聘教师数',
          value: 342,
          unit:'人'
        },
        {
          name: '新增学生',
          value: 1342,
          unit:'人'
        },
      ],
      midList: [
        {
          name: '统一采购',
          value: 342,
          unit:'个'
        },
        {
          name: '校自行采购',
          value: 342,
          unit:'个'
        },
      ],
      midList2: [
        {
          name: '零星项目',
          value: 342,
          unit:'个'
        },
        {
          name: '专项改造',
          value: 342,
          unit:'个'
        },
        {
          name: '前期项目',
          value: 342,
          unit:'个'
        },
        {
          name: '实施项目',
          value: 342,
          unit:'个'
        },
      ],
      midList3: [
        {
          name: '正式编制',
          value: 342,
          unit:'人'
        },
        {
          name: '雇员制',
          value: 342,
          unit:'人'
        },
        {
          name: '临时工',
          value: 342,
          unit:'人'
        },

      ],
      midList4: [
        {
          name: '幼儿园',
          value: 342,
          unit:'人'
        },
        {
          name: '小学',
          value: 342,
          unit:'人'
        },
        {
          name: '初中',
          value: 342,
          unit:'人'
        },

      ],
      tableData:[
          { itemName: '2023年东阳市中小学计算机项目', type: '计算机设备', amount: '东阳市教育局', money: 1395000.00, duration: '进行中',  showOverflowTooltip: true, },
          { itemName: '2022年东阳市中小学校多媒体设备配备清单', type: '计算机设备', amount: '东阳市教育局', money: 6480800.00, duration: '已完成',  },
          { itemName: '2022年新建学校（幼儿园）幼教一体机配备方案', type: '幼教一体机', amount: '东阳市教育局', money:9083340.00, duration: '已完成',  },
          { itemName: '2022年东阳市中小学校多媒体设备配备清单', type: '多媒体设备', amount: '东阳市教育局', money: 52757384.00, duration: '已完成',  },
          { itemName: '2021年东阳市中小学校多媒体设备配备清单', type: '多媒体设备', amount: '东阳市教育局', money: 3622930.00, duration: '已完成',  }
      ],
      columns: [
          { label: '项目名称', prop: 'itemName', minWidth: 100, showOverflowTooltip: true },
          { label: '项目类型', prop: 'type',  showOverflowTooltip: true },
          { label: '单位', prop: 'amount', align: 'center' },
          { label: '金额(万元)', prop: 'money', align: 'center' },
          { label: '状态', prop: 'duration', align: 'center' },

      ],
      tableData2:[
        { itemName: '实验幼儿园卢宅园区新建项目', type: '实施项目', amount: '实验幼儿园', money: 8900, duration: '进行中',  showOverflowTooltip: true, },
        { itemName: '防军初中教学楼新建项目', type: '实施项目', amount: '防军初中', money: 1400, duration: '已完成',  },
        { itemName: '巍山高中食堂报告厅及运动场新建项目', type: '实施项目', amount: '巍山高中', money:3500, duration: '已完成',  },
        { itemName: '下范小学食堂体艺楼及门卫新建项目', type: '专项改造', amount: '下范小学', money: 1800, duration: '已完成',  },
        { itemName: '东阳三中体育馆新建项目', type: '实施项目', amount: '东阳三中', money: 2500, duration: '已完成',  }
      ],
      columns2: [
          { label: '项目名称', prop: 'itemName', showOverflowTooltip: true },
          { label: '单位', prop: 'amount', align: 'center' },
          { label: '金额(万元)', prop: 'money', align: 'center' },
          { label: '状态', prop: 'duration', align: 'center' },

      ],
      classOption: {
          // autoPlay: false,
          limitMoveNum: 4, // 开始滚动的数量
          singleHeight: 46, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
          waitTime: 2000, // 单步停止等待时间(默认值1000ms)
        },
        config:{
          rowHeight: 44 + 'px',
          headerHeight: 60 + 'px',
          rowBGC: 'rgba(7,124,220,.16)',
          stripeBGC: 'rgba(7,124,220,.04)'
        }
    };
  },
  mounted () {
    this.handleStart()
  },
  beforeDestroy() {
      if (this.interval) {
        clearInterval(this.interval);
      }
    },
  methods: {
    handleStart(){
        if (this.interval) {
          clearInterval(this.interval)
        }
        this.interval = setInterval(() => {
          for (let i = 0; i < this.$refs.countTo.length; i++){
            this.$refs.countTo[i].start()
          }
        }, 8600) // 8.6 = 间隔5秒更新 + 数字动画3.6s
      },
  },
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  /* 对应纵向滚动条的宽度 */
  width: 2px;
  /* 对应横向滚动条的宽度 */
  height: 2px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: #49b1f5;
  border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: rgba(3, 31, 73, 0.5);
  border-radius: 32px;
}
.center {
  .head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    .yuan {
      position: relative;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background-image: url("~@/assets/food/yuan.svg");
      margin-right: 8px;
      .one {
        position: absolute;
        top: 18px;
        left: 20px;
        width: 32px;
        height: 32px;
        // background-image: url("~@/assets/food/5.svg");
        // background-size: 100% 100%;
      }
    }
    .text {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 20px;
      font-weight: 500;
    }
  }

  ._box {
    margin-top: 26px;
      background: rgba(0,16,43,0.32); border: 1px solid; border-image: linear-gradient(to bottom, rgba(8,132,255, .1), rgba(8,132,255,1)) 1;
      overflow: hidden; height: 290px;
      display: grid; grid-template-rows: 34px auto;
      .__subTit { margin-top: -4px; margin-left: -3px; }
    }

    .list {
      padding: 6px 0; display: flex; flex-direction: column;
      justify-content: space-evenly;
      .item {
        display: flex; align-items: center; padding: 4px 8px;
        .label { font-size: 16px; font-family: PingFangSC;  min-width: 60px; margin-right: 10px; text-align: right; color: rgba(255,255,255,.85)}
        .progressBar {
          width: 100%; height: 14px; background: rgba(7,124,220,0.24); overflow: hidden; border-radius: 6px;
          padding: 3px;
          ._outer {
            background: linear-gradient(270deg, #63F3FF 0%, #47A4FF 100%)!important; height: 100%; border-radius: 6px;
            animation: progress 2s; animation-delay: 0.5s; animation-fill-mode: forwards;
          }
          @keyframes progress {
            from {
              width: 0;
            }
            to {
              width: var(--width);
            }
          }
        }
        .text { min-width: 50px; margin-left: 10px; font-size: 20px; font-family: DINPro; }
      }
    }
  }


</style>
